import {observer} from 'mobx-react-lite';
import {Path, Svg} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {SvgCommon} from './Common';
import {IconProps} from './types';

const tts = Object.freeze({
  main: 'color_1',
  default: 'color_4',
});

export const SvgCircleRight = observer((props: IconProps) => {
  const {type = 'default'} = props;
  const {theme} = useGlobalStore();
  return (
    <Svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <Path
        d="M7.11143 6.34676L7.19982 6.25837L7.11143 6.16999L5.13644 4.19499C5.03525 4.0938 5.03525 3.94795 5.13644 3.84676C5.23762 3.74558 5.38347 3.74558 5.48466 3.84676L7.73466 6.09676C7.77795 6.14005 7.79805 6.20264 7.79805 6.28337C7.79805 6.32495 7.79259 6.3581 7.7845 6.37913C7.78204 6.38553 7.77998 6.38933 7.77863 6.39142L7.75552 6.39912L7.73466 6.41999L5.48466 8.66999C5.38347 8.77117 5.23762 8.77117 5.13644 8.66999C5.03525 8.5688 5.03525 8.42295 5.13644 8.32176L7.11143 6.34676ZM7.77692 6.3936C7.77689 6.39359 7.7771 6.39331 7.7776 6.39288C7.77718 6.39341 7.77694 6.39362 7.77692 6.3936ZM1.06055 6.27087C1.06055 3.36491 3.40458 1.02087 6.31055 1.02087C9.21651 1.02087 11.5605 3.36491 11.5605 6.27087C11.5605 9.17684 9.21651 11.5209 6.31055 11.5209C3.40458 11.5209 1.06055 9.17684 1.06055 6.27087ZM1.56055 6.27087C1.56055 8.88991 3.69151 11.0209 6.31055 11.0209C8.92958 11.0209 11.0605 8.88991 11.0605 6.27087C11.0605 3.65184 8.92958 1.52087 6.31055 1.52087C3.69151 1.52087 1.56055 3.65184 1.56055 6.27087Z"
        fill={getColorStr(theme, tts[type])}
        stroke={getColorStr(theme, tts[type])}
        strokeWidth="0.25"
      />
    </Svg>
  );
});
